<html>
<head>
<style>
</style>
<script src=temper.js></script>
<script src=http://www.feedgraph.com/js/feedgraph.js></script>
<script> 

/* templates */
temper.include("templates/audio-player.html");
var audioPlayer = temper.script("audio-player");
var photoStreamItem = temper.script("photo-stream-item");

var playing = false;
var queue = [];

function startPlaying() {

	if (playing == true) return;
	playing = true;

	playSong(queue[0]);
}

function playSong(song) {

	audioPlayer.replace("container", song);
	document.getElementById("audio").play();
	document.getElementById("audio").addEventListener("ended", songEnded);
}

function songEnded () {

	console.log("song ended");
	skip();
	startPlaying();
}

function onSong(song) {

	queue.push(song);
	startPlaying();
}

function skip() {

	queue.shift();
}

function onPhoto(photo) {

	try {
		photoStreamItem.append("photo-stream", photo);
	}
	catch (e) {
	}
}

function init() {

	feedgraph.watch("/test/*/songs", onSong);
	feedgraph.watch("/test/*/photos", onPhoto);
}

</script>

</head>
<body onload=init()>

	<h1>Some Bar</h1>
	<div id=photo-stream></div>
	<div id=container></div>
	<button onclick=skip()>skip</button>
<body>
</html>
